<template>
    <div class="exam">
        <div class="questions">
            <div class="question" v-for="(question, idx) in questions" :key="idx">
                <div class="title">{{question.a}}<span class="symbol">{{question.symbol}}</span>{{question.b}}</div>
                <div class="equals">=</div>
                <div class="answer">{{ showAnswer ? question.r:'' }}</div>
            </div>
        </div>
        <div class="tool-bar">
            <button class="btn btn-next" @click="next">下一批</button>
            <button class="btn btn-answer" @click="showAnswer = true">查看答案</button>
        </div>
    </div>  
  </template>
  
  <script>
  export default {
    name: 'ExamPage',
    data(){
      return {
        questions: [],
        showAnswer: false
      }
    },
    mounted(){
      this.next();
    },
    methods:{
      next(){
        this.showAnswer = false;
        const len = 10;
        let questions = [];
        for(let i =0; i< len; i++){
            questions.push(this.generate());
        }
        this.questions = questions;
      },
      generate(){
        const symbol = Math.random() > 0.5 ? '+' : '-';
        let a = 10 + Math.floor(Math.random() * 90);
        let b = 10 + Math.floor(Math.random() * 90);
        let r = 0;
        if(symbol == '-'){
          if(a < b){
            let t = a;
            a = b;
            b = t;
          }
          r = a - b;
        }
        else{
          r = a + b;
        }
        if(r > 100 || r < 10){
            return this.generate(); 
          }
        
        console.info('%c' + a + '%c ' + symbol + ' %c' + b + '%c' + " = " + '%c' +r, 'color:#1890ff;', 'color:#71e2a3;', 'color:#1890ff;', 'color:#71e2a3;', 'color:#ffba00;');
        return {
          a, b, r, symbol
        }
      }
    }
   
  }
  </script>
  
  <style scoped>
   .exam{
    background: rgb(4, 76, 64);
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    padding-top:80px;
    padding-bottom: 40px;
   }
    .questions{
        font-family:'Courier New', Courier, monospace;
        font-weight: bold;
        display: flex;
        flex-wrap: wrap;
        width: 36cm;
        margin:0 auto;
        color: #FFFFFF;
    }
    .question{
        font-size: 100px;
        width: 50%;
        display: flex;
        align-items:center;
        justify-content: center;
        line-height: 120px;
      
    }
    .symbol{
        color:rgb(230, 127, 48);
        margin:0 10px;
    }
    .equals{
        margin:0 20px;
        color:rgb(230, 127, 48);
    }
    .answer{
        color:rgb(232, 228, 161);
        width: 100px;
        text-align: right;
    }

    .tool-bar{
        margin: 50px auto;
    }
    .btn{
        border: none;
        background-color: #1890ff;
        color: #FFFFFF;
        padding: 10px 40px;
        line-height: 1.5;
        font-size: 30px;
        cursor: pointer;
    }
    
  </style>
  